<template>
  <el-dialog title="登录" :visible.sync="dialogVisible" center width="20%" destroy-on-close :close-on-click-modal="false">
    <component :is="currentComponent" @closeDialog="dialogVisible = false"></component>
    <div class="placeholder"><i>网 抑 云 音 乐 登 录</i></div>
    <div class="Login" @click="textClick">
      <u>{{ textWord }}登录</u>
    </div>
  </el-dialog>
</template>

<script>
import PhoneLogin from './PhoneLogin.vue';
import QrCodeLogin from './QrCodeLogin.vue';
export default {
  data() {
    return {
      dialogVisible: false,
      currentComponent: PhoneLogin,
      textWord: '二维码',
    };
  },
  methods: {
    //底部文本点击
    textClick() {
      if (this.currentComponent === PhoneLogin) {
        this.currentComponent = QrCodeLogin;
        this.textWord = '验证码';
        //调取二维码key接口
        //注意：此时需要放在nextTick函数中调用，因为组件切换后需要等到DOM更新才能获取到Qr组件，直接调用获取到的是更新前的Phone组件
        // this.$nextTick(() => {
        //   this.$refs.Code.getKey();
        // });
      } else {
        this.currentComponent = PhoneLogin;
        this.textWord = '二维码';
      }
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.placeholder {
  text-align: center;
  color: $themeColor;
  margin: 70px 0;
}

.Login {
  text-align: center;
  cursor: pointer;
  :hover {
    color: $themeColor;
  }
}
</style>